<template lang="html">
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="addRules" label-width="160px">
      <el-form-item prop="fullname" label="子管理员姓名">
        <el-col :span="6">
          <el-input v-model="form.fullname"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item prop="phone" label="子管理员账号">
        <el-input name="phone"  v-model="form.phone"  placeholder="username" />
      </el-form-item>
      <el-form-item prop="password" label="设置登录密码">
        <el-input name="password"  @keyup.enter.native="handleLogin" v-model="form.password"placeholder="password">
        </el-input>
      </el-form-item>
      <el-form-item label="选择子管理员角色">
        <el-select v-model="form.role" placeholder="请选择">
          <el-option label="运营人员" value="1"></el-option>
          <el-option label="财务人员" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="buttonall" @click="onSubmit" type="primary">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import { isvalidUsername } from '@/utils/validate'
  export function add(mes) {
    return request({
      url: '/v1/admin/admin/add',
      method: 'post',
      data: mes
    })
  }
  export default {
    data() {
      const validateFullname = (rule, value, callback) => {
        if (value=='') {
          callback(new Error('姓名不能为空'))
        } else {
          callback()
        }
      }
      const validateUsername = (rule, value, callback) => {
        if (!isvalidUsername(value)) {
          callback(new Error('请输入正确的用户账号（11位手机号）'))
        } else {
          callback()
        }
      }
      const validatePass = (rule, value, callback) => {
        if (value.length < 5) {
          callback(new Error('密码不能小于5位'))
        } else {
          callback()
        }
      }
      return {
        form: {
          fullname: '',
          phone: '',
          password: '',
          role: '',
          token: ''
        },
        addRules: {
          fullname: [{ required: true, trigger: 'blur', validator: validateFullname }],
          phone: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', validator: validatePass }],
        },
        pwdType: 'password'
      }
    },
    created: function() {
      const token = JSON.parse(localStorage.getItem('admin'));
      this.form.token = token;
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate(valid => {
           if (valid) {
             add(this.form).then(res => {
                 if (res.code === 200) {
                   console.log(res);
                   this.$message({
                     message: 'success!',
                     type: 'success'
                   });
                   this.$router.go(-1)
                 } else {
                   this.$message({
                     message: res.msg,
                     type: 'error'
                   });
                 }
               }).catch(error => {
                 this.$message({
                   message: error,
                   type: 'error'
               });
             })
            } else {
              console.log('error submit!!')
              return false
            }
          })
        console.log(this.form)

      },
    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-input{
    width: 200px;
  }
</style>
